<html>

<head>
  <style>
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 200
    }

    .spinner1 {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border: solid 30px;
      border-radius: 5em;
      border-color: #0099ff transparent #0099ff transparent;
      animation: spin 1s linear infinite;
    }

    .dot:before,
    .dot:after {
      content: ".";
    }

    .dot {
      animation: fade 1s linear infinite;
    }

    .dot:after {
      animation: fade 2s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes fade {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    #spinner-wrapper {
      text-align: center;
      display: table;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    #wrap {
      box-sizing: border-box;
      display: table-cell;
      vertical-align: middle;
    }

    .item {
      display: inline-block;
      padding: 0 5em;
    }
  </style>
  <script src="//cdn.auth0.com/js/lock/11.7.2/lock.min.js"></script>
  <script src="//cdn.auth0.com/js/auth0/9.5.1/auth0.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      lock.show()
    });
    var lock = new Auth0Lock('MSh9Q3sxUT6ZQy0xevjgv1rHVGOvgPpO', 'neo4j-sync.auth0.com', {
      closable: false,
      auth: {
        params: {
          scope: 'openid offline_access'
        }
      },
      redirectUrl: location.href,
      responseType: 'token',
      disableSignupAction: true,
      icon: 'http://neo4j.com/wp-content/themes/neo4jweb/assets/images/neo4j-logo-2015.png',
      dict: {
        signin: {
          title: 'Sign in'
        }
      }
    });
    function result(authResult) {
      if (authResult && authResult.accessToken && authResult.idToken) {
        lock.getUserInfo(authResult.accessToken, function (err, userInfo) {
          if (!err) {
            lock.hide()
          }
          window.addEventListener('message', function (event) {
            getFirebaseToken(authResult.idToken, function (res) {
              var mapObj = {
                profile: userInfo,
                data_token: res.idToken,
                token: authResult.idToken,
                accessToken: authResult.accessToken,
                state: authResult.state,
                refreshToken: authResult.refreshToken
              }
              event.source.postMessage(mapObj, event.origin);
            })
          }, false);
        });
        // use authResult.idTokenPayload for profile information
      }
    }
    lock.on("hash_parsed", result);
    lock.on("authenticated", result);
    var userProfile = null;
    var auth0 = new auth0.WebAuth({
      domain: 'neo4j-sync.auth0.com',
      clientID: 'MSh9Q3sxUT6ZQy0xevjgv1rHVGOvgPpO',
      callbackURL: location.href,
      callbackOnLocationHash: true
    });

    function getFirebaseToken(id_token, cb) {
      var options = {
        grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
        id_token: id_token,
        api: 'firebase'
      };
      auth0.client.delegation(options, function (err, res) {
        cb(res);
      });
    }
  </script>
</head>

<body>
  <div id="spinner-wrapper">
    <div id="wrap">
      <div class="item">
        <div class="spinner1"></div>
        <p>Loading
          <span class="dot">.</span>
        </p>
      </div>
    </div>
  </div>
</body>

</html>